<!--
* 方法:Basic-info.vue
* 描述:系统基本添加/编辑组件
* 作者:Jimmy
* 日期:2018-08-01
*/
-->
<style lang="less">
  @import '../../../styles/common.less';
  @import '../system.less';
</style>
<template>
  <Card class="demo-spin-article">
    <p slot="title">
      {{data.label}}参数
    </p>
    <Row class="margin-bottom-15">
      <Button @click="$emit('toggle',{type:'list'})"><Icon type="ios-undo-outline" />
        返回
      </Button>
    </Row>
    <Row>
      <template>
        <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="40">
          <FormItem label="变量" prop="varname">
            <Input type="text" v-model="formCustom.varname"></Input>
          </FormItem>
          <FormItem label="昵称" prop="info">
            <Input type="text" v-model="formCustom.info"></Input>
          </FormItem>
          <FormItem label="参数" prop="value">
            <Input type="text" v-model="formCustom.value"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formCustom')" :loading="formSave">
              <span v-if="!formSave">保存</span><span v-else>保存中</span>
            </Button>
            <Button @click="handleReset('formCustom')" class="margin-left-8">重置</Button>
          </FormItem>
        </Form>
      </template>
      <Spin size="large" fix v-if="spinShow"></Spin>
    </Row>
  </Card>
</template>
<script>
import bus from '@/libs/http/eventBus.js'
export default {
  props: ['data'],
  data () {
    // 添加和编辑开始
    const validateVarname = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入变量'))
      } else {
        callback()
      }
    }
    const validateInfo = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入昵称'))
      } else {
        callback()
      }
    }
    const validateValue = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入参数'))
      } else {
        callback()
      }
    }
    // 添加和编辑结束
    return {
      // 默认开启加载
      spinShow: true,
      // 默认提交状态
      formSave: false,
      // 添加还是编辑
      formType: this.data.type,
      // 添加和编辑开始
      formCustom: {
        varname: '',
        info: '',
        value: '',
        id: this.data.id
      },
      ruleCustom: {
        varname: [
          {validator: validateVarname, trigger: 'change'},
          {
            type: 'string',
            pattern: /^[a-z0-9A-Z_]+$/,
            message: '输入的组件必须字母数字_之间组合',
            trigger: 'change'
          }
        ],
        info: [
          {validator: validateInfo, trigger: 'change'}
        ],
        value: [
          {validator: validateValue, trigger: 'change'}
        ]
      }
      // 添加和编辑结束
    }
  },
  methods: {
    // 信息保存
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // 防止多次提交
          this.formSave = true
          // 请求数据保存
          this.$api.basic(this.formCustom, this.formType).then((response) => {
            if (response.code === 200) {
              bus.$emit('loadList', this.formType)
              this.$Message.success(response.msg)
              this.$emit('toggle', {type: 'list'})
            } else {
              this.$Message.error(response.msg)
            }
            this.formSave = false
          }).catch((error) => {
            this.formSave = false
            this.$Message.error(error.message)
          })
        }
      })
    },
    // 清楚表单
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 信息获取
    getInfoData (id) {
      // 读取请求数据
      this.$api.basic({id: id}, this.data.type, 'get').then((response) => {
        if (response.code === 200) {
          if (response.data.id) {
            this.formType = 'edit'
            this.formCustom = response.data
          }
          this.spinShow = false
        } else {
          this.$Message.error(response.msg)
          this.$emit('toggle', {type: 'list'})
        }
      }).catch((error) => {
        this.$Message.error(error.message)
        this.spinShow = false
      })
    }
    // 添加和编辑结束
  },
  created () {
    // 获取信息
    this.getInfoData(this.formCustom.id)
  }
}
</script>
